<template>
  <div class="login">
    <Row justify="center" align="middle" @keydown.enter.native="submitLogin" style="height:100%">
      <div class="loginUp">
        <div class="loginLeft">
          <!-- <img src="../assets/login/logo.png" alt="" srcset=""> -->
          <!--          <span class="line"></span>-->
          <span class="title" style="font-size: 24px; font-weight: bold; ">智慧医院就诊系统</span>
        </div>
      </div>

      <div class="loginMiddle">
        <div class="login-background">
          <div class="loginBg"></div>
          <div class="loginRight">
            <Row class="loginRow">
              <Tabs v-model="tabName" @on-click="changeTabName" class="loginTab">
                <TabPane label="账号密码登陆" name="userAndPassword">
                  <Form ref="usernameLoginForm" :model="form" :rules="usernameLoginFormRules" class="form">
                    <FormItem prop="username" class="loginInput">
                      <Row>
                        <Input v-model="form.username" size="large" clearable placeholder="登录账号" autocomplete="off">
                        <Icon class="iconfont icon-yonghu" slot="prefix" style="line-height:50px" />
                        </Input>
                      </Row>
                    </FormItem>
                    <FormItem prop="password">
                      <Input style="height:50px;line-height:50px" type="password" v-model="form.password" size="large"
                        placeholder="请输入登录密码" password autocomplete="off">
                      <Icon class="iconfont icon-mima1" slot="prefix" style="line-height:50px" />
                      </Input>
                    </FormItem>
                    <FormItem prop="imgCode">
                      <Row type="flex" justify="space-between" style="align-items: center;overflow: hidden;">
                        <Input v-model="form.imgCode" size="large" clearable placeholder="请输入验证码" :maxlength="10"
                          class="input-verify" />
                        <div class="code-image" style="position:relative;font-size:12px;">
                          <Spin v-if="loadingCaptcha" fix></Spin>
                          <img :src="captchaImg" @click="getCaptchaImg" alt="验证码加载失败"
                            style="width:110px;cursor:pointer;display:block" />
                        </div>
                      </Row>
                    </FormItem>
                  </Form>
                  <Row type="flex" justify="space-between" align="middle">
                    <Checkbox v-model="saveLogin" size="large">是否自动登录</Checkbox>
                    <router-link to="/regist">
                      <a class="forget-pass">没有账号？点我注册</a>
                    </router-link>
                  </Row>
                  <Row>
                    <Button class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
                      <span v-if="!loading" style="letter-spacing:20px; font-weight:bold">登录</span>
                      <span v-else>正在登录...请稍后</span>
                    </Button>
                  </Row>
                </TabPane>
                <TabPane label="手机号码登录" name="mobile">
                  <Form ref="usernameLoginForm" :model="form" :rules="usernameLoginFormRules" class="form">
                    <FormItem prop="username" class="loginInput">
                      <Row>
                        <Input v-model="form.username" size="large" clearable placeholder="手机号" autocomplete="off">
                        <Icon class="iconfont icon-yonghu" slot="prefix" style="line-height: 50px" />
                        </Input>
                      </Row>
                    </FormItem>
                    <FormItem prop="password">
                      <Row type="flex" justify="space-between" style="align-items: center;">
                        <span>
                          <Input style="height: 50px; line-height: 50px; width: 260px;" type="password" size="large"
                             placeholder="请输入手机验证码" autocomplete="off" class="input-verify">
                          </Input>
                        </span>
                        <span>
                          <Button class="verify-btn" type="primary" size="large" @click="sendVerificationCode"
                            :disabled="!canSendVerificationCode" style="width: 120px;">
                            {{ sendButtonText }}
                          </Button>
                        </span>
                      </Row>
                    </FormItem>
                    <FormItem prop="imgCode">
                      <Row type="flex" justify="space-between" style="align-items: center; overflow: hidden;">
                        <Input v-model="form.imgCode" size="large" clearable placeholder="请输入图形验证码" :maxlength="10"
                          class="input-verify" />
                        <div class="code-image" style="position: relative; font-size: 12px;">
                          <Spin v-if="loadingCaptcha" fix></Spin>
                          <img :src="captchaImg" @click="getCaptchaImg" alt="验证码加载失败"
                            style="width: 110px; cursor: pointer; display: block;" />
                        </div>
                      </Row>
                    </FormItem>
                  </Form>
                  <Row type="flex" justify="space-between" align="middle">
                    <Checkbox v-model="saveLogin" size="large">是否自动登录</Checkbox>
                    <router-link to="/regist">
                      <a class="forget-pass">没有账号？点我注册</a>
                    </router-link>
                  </Row>
                  <Row>
                    <Button class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
                      <span v-if="!loading" style="letter-spacing: 20px; font-weight: bold;">登录</span>
                      <span v-else>正在登录...请稍后</span>
                    </Button>
                  </Row>
                </TabPane>

              </Tabs>

            </Row>
          </div>
        </div>
      </div>

    </Row>
    <div class="footer-info">
      网站所有者：Chris Hong&nbsp;&nbsp;蜀ICP备2025141345号-1
    </div>
  </div>
</template>

<script>
import {
  login,
  userInfo,
  initCaptcha,
  drawCodeImage
} from "@/api/index";
import Cookies from "js-cookie";
import util from "@/libs/util.js";
import { setStore, getStore } from '@/libs/storage';

export default {
  components: {},
  data() {
    return {
      canSendVerificationCode: true,
      sendButtonText: '发送验证码',
      saoMaFx: false,
      captchaId: "",
      captchaImg: "",
      loadingCaptcha: false,
      error: false,
      tabName: "userAndPassword",
      saveLogin: true,
      loading: false,
      form: {
        username: "admin",
        password: "123456",
        mobile: "",
        code: ""
      },
      usernameLoginFormRules: {
        username: [{
          required: true,
          message: "账号不能为空",
          trigger: "blur"
        }],
        password: [{
          required: true,
          message: "密码不能为空",
          trigger: "blur"
        }],
        imgCode: [{
          required: true,
          message: "验证码不能为空",
          trigger: "blur"
        }]
      }
    };
  },
  methods: {
    sendVerificationCode() {
      // TODO: 实现发送验证码的逻辑
      console.log('发送验证码');

      // 模拟倒计时
      this.canSendVerificationCode = false;
      let countDown = 60;
      const timer = setInterval(() => {
        countDown--;
        this.sendButtonText = `${countDown}秒后重试`;
        if (countDown === 0) {
          clearInterval(timer);
          this.canSendVerificationCode = true;
          this.sendButtonText = '发送验证码';
        }
      }, 1000);
    },
    getCaptchaImg() {
      this.loadingCaptcha = true;
      initCaptcha().then(res => {
        this.loadingCaptcha = false;
        if (res.success) {
          this.captchaId = res.result;
          this.captchaImg = drawCodeImage + this.captchaId;
        }
      });
    },
    changeTabName(e) {
      if (e != "userAndPassword") {
        window.WwLogin({
          "id": "qywxsmqywxsm",
          "appid": "wwf94bb44e76e308f8",
          "agentid": "1000002",
          "redirect_uri": "https://artskyhome.com:8080/%23/login",
          "state": "zwz1314520",
          "href": "",
        });
      }
    },
    afterLogin(res) {
      let accessToken = res.result;
      // 先清除所有旧的数据
      Cookies.remove('ZWZ_TOKEN');
      Cookies.remove('userInfo');
      localStorage.clear();
      
      // 设置新的token
      Cookies.set('ZWZ_TOKEN', accessToken, { 
        expires: 7,
        path: '/'
      });
      
      userInfo().then((res) => {
        if (res.success) {
          delete res.result.permissions;
          let roles = [];
          res.result.roles.forEach((e) => {
            roles.push(e.name);
          });
          delete res.result.roles;
          
          // 保存用户信息
          if (this.saveLogin) {
            Cookies.set("userInfo", JSON.stringify(res.result), {
              expires: 7,
              path: '/'
            });
          } else {
            Cookies.set("userInfo", JSON.stringify(res.result), {
              path: '/'
            });
          }
          
          // 保存其他信息到localStorage
          setStore("roles", roles);
          setStore("saveLogin", this.saveLogin);
          setStore("userInfo", res.result);
          
          this.$store.commit("setAvatarPath", res.result.avatar);
          util.initRouter(this);
          this.$router.push({
            name: "home_index",
          });
        } else {
          this.loading = false;
        }
      });
    },
    submitLogin() {
      this.$refs.usernameLoginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          login({
            username: this.form.username,
            password: this.form.password,
            code: this.form.imgCode,
            captchaId: this.captchaId,
            saveLogin: this.saveLogin
          }).then(res => {
            if (res.success) {
              this.afterLogin(res);
            } else {
              this.loading = false;
              this.getCaptchaImg();
            }
          });
        }
      });
    }
  },
  mounted() {
    this.getCaptchaImg();
  }
};
</script>

<style lang="less">
html,
body {
  background: #ffffff !important;
  font-family: Microsoft YaHei;
  font-weight: 400;
  ;
}

a {
  font-family: Microsoft YaHei;

  color: #77C8C6;
}

input::-webkit-input-placeholder {
  font-size: 14px;
}

.ivu-checkbox-wrapper.ivu-checkbox-large {
  font-size: 14px;
}

a:hover {
  font-family: Microsoft YaHei;
  color: #77C8C6;
}

.login {
  height: 100%;
  background-color: #ffffff;

  .ivu-tabs-nav-container {
    line-height: 2;
    font-size: 17px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    zoom: 1;
  }

  .loginUp {
    width: 1200px;
    min-height: 80px;
    background-color: #ffffff;
    margin: 0 auto;
    overflow: hidden;
  }

  .loginLeft {
    margin-top: 20px;
    height: 50px;
    display: flex;
  }

  .line {
    display: inline-block;
    width: 2px;
    height: 25px;
    background: url(../assets/login/line.png);
    margin: 0px 10px;
    margin-top: 15px;
  }

  .title {
    line-height: 58px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 500;
    color: #999999;
  }

  .loginMiddle {
    width: 100%;
    height: 780px;
    margin: 0 auto;
    background-color: #83c9c7;
    overflow: hidden;
    // background: linear-gradient(45deg, rgba(2, 173, 168, 0.17), rgba(0, 221, 215, 0.17));
  }

  .login-background {
    width: 1200px;
    height: 780px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .loginBg {
    width: 560px;
    height: 684px;
    margin-top: -20px;
    background-image: url(../assets/login/star.png);
    background-repeat: no-repeat;
    background-position: left bottom;
  }

  .loginRight {
    width: 450px;
    height: 550px;
    background-color: #ffffff;
    border: 1px solid #E6E6E6;
    box-shadow: 0px 2px 15px 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin-top: 115px;
    position: relative;
  }

  .loginRow {
    padding: 0px 30px;
  }

  .loginDown {
    width: 1200px;
    height: auto;
    margin: 0 auto;

  }

  .loginTab {
    margin-top: 20px;
  }

  .ivu-tabs-tab {
    color: #333333;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
  }

  .ivu-tabs-nav .ivu-tabs-tab {
    padding: 8px 42px;
    margin-right: 0px;
  }

  .ivu-tabs-ink-bar {
    height: 4px;
    width: 86px !important;
    border-radius: 2px;
    margin: 0px 42px;
    background-color: #83C9C7;
  }

  .ivu-tabs-nav .ivu-tabs-tab-active,
  .ivu-tabs-nav .ivu-tabs-tab:hover {
    color: #333333;
  }

  .loginInput {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }

  .ivu-tabs-bar {
    border-bottom: 0px;
  }

  verify-btn {
    width: 260px;
    height: 50px;
    background: radial-gradient(circle, #77C8C6, #50C7C4);
    border: 2px solid #61C8C5;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.21);
    border-radius: 4px;
  }

  .login-btn {
    width: 390px;
    height: 50px;
    background: radial-gradient(circle, #77C8C6, #50C7C4);
    border: 2px solid #61C8C5;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.21);
    border-radius: 4px;
  }

  .login .login-btn,
  .login .other-login {
    margin-top: 40px;
  }

  .loginBottom {
    width: 448px;
    height: 60px;
    background: #f9f9f9;
    border-radius: 0px 0px 5px 5px;
    padding: 0px;
    position: absolute;
    bottom: 0px;
    font-size: 16px;
    font-weight: bold;
    color: #83C9C7;
    text-align: center;
    line-height: 60px;
  }

  .loginDown p {
    text-align: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
    color: #777777;
    line-height: 22px;
  }

  .ivu-checkbox-checked .ivu-checkbox-inner {
    background-color: #83c9c7;
    border-color: #83c9c7;
  }

  .ivu-form-item {
    margin-bottom: 24px;
  }

  .ivu-input-wrapper-large .ivu-input-icon {
    line-height: 50px;
  }

  .loginInput input:nth-of-type(1) {
    height: 50px;
    font-size: 18px;
    font-weight: bold;
    font-family: Microsoft YaHei;
    color: #333333;
    line-height: 50px;
  }

  .ivu-input-large {
    height: 50px;
    color: #CFCFCF;
    line-height: 50px;
  }

  .ivu-input-large {
    font-size: 14px;
  }

  .ivu-btn-large {
    height: 50px;
  }

  .form {
    padding-top: 2vh;

    .input-verify {
      width: 67%;
    }
  }

  .code-image {
    .ivu-spin-fix .ivu-spin-main {
      height: 20px;
    }
  }

  .forget-pass,
  .other-way {
    font-size: 14px;
  }

  .login-btn,
  .other-login {
    margin-top: 40px;
  }

  .icons {
    display: flex;
    align-items: center;
  }

  .other-icon {
    cursor: pointer;
    margin-left: 10px;
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, .2);

    :hover {
      color: #2d8cf0;
    }
  }

  .layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 368px;
    height: 100%;
  }

  .footer-info {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    z-index: 999;
    padding: 18px 0 14px 0;
    letter-spacing: 1px;
  }
}
</style>
